<template>
	<view style="padding-top: 10px;">
		<u-navbar
			title="资产列表"
			@rightClick="rightClick"
			:fixed="true"
			:border="true"
			:placeholder="true"
			:autoBack="true">
			<view
				class="u-nav-slot"
				slot="right"
			>
			<view style="margin-top: 4px;">
				<image v-show="isQuery" src="@/static/images/search-active.png" style="width: 18px;height: 18px;"></image>
				<image v-show="!isQuery" src="@/static/images/search.png" style="width: 18px;height: 18px;"></image>
			</view>
			</view>
		</u-navbar>
		<view style="margin-bottom: 50px;">
			<view v-for="item in dataList" class="data-warp" @click="goDetailPage(item)">
				<view class="data-warp-header">
					<view class="left">
						{{item.title}}
					</view>
					<view class="right">
						{{item.barcodeNumber}}
					</view>
				</view>
				<view class="data-warp-content">
					<view class="data-content-item">
						<view class="label">资产分类：</view>
						<view class="value">{{formatDictValue(item.assetType,assetTypeList)}}</view>
					</view>
					<view class="data-content-item">
						<view class="label">业务状态：</view>
						<view class="value">{{formatDictValue(item.businessStatus,businessList)}}</view>
					</view>
					<view class="data-content-item">
						<view class="label">资产编号：</view>
						<view class="value">{{item.assetNumber||'-'}}</view>
					</view>
					<view class="data-content-item">
						<view class="label">使用部门：</view>
						<view class="value">{{item.useDeptName||'-'}}</view>
					</view>
					<view class="data-content-item">
						<view class="label">使用人：</view>
						<view class="value">{{item.useUserName||'-'}}</view>
					</view>
					<view class="data-content-item">
						<view class="label">存放地点：</view>
						<view class="value">{{item.storageLocation||'-'}}</view>
					</view>
				</view>
				<view class="data-warp-footer">
					<view class="btn edit-btn" @click.stop="openEdit(item)">
						修改数据
					</view>
					<view class="btn copy-btn" @click.stop="openCopy(item)">
						复制新增
					</view>
					<view class="btn print-btn" @click.stop="print(item)">
						标签打印
					</view>
					<view class="btn remove-btn" @click.stop="openRemove(item)">
						删除数据
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length==0 && !loading">
			<u-empty mode="data"></u-empty>
		</view>
		<ble-print ref="blePrintRef"></ble-print>

		<u-modal :show="showRemoveModal"  title="提示" @cancel="showRemoveModal=false" :showCancelButton="true" :buttonReverse="true" @confirm="deleteData">
			<view class="slot-content" v-if="removeData">
				你确认删除<span style="color: red;">【{{removeData.title}} {{removeData.barcodeNumber}}】</span>的数据吗？
			</view>
		</u-modal>

		<view v-show="showQuery">
			<u-popup :show="true" mode="right" closeIconPos='top-right' @close="showQuery=false" style="width: 200px">
				<view>
					<u-divider text="请输入查询条件"></u-divider>
					<query-box @search="search"></query-box>
				</view>
			</u-popup>
		</view>
		
		<view class="nav-footer">
			<view>
				<view>
					总条数：{{total}} 条，总资产原值：{{totalPrice}} 元
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {getAssetListPage,removeAsset} from '@/api/asset/index.js'
	import BlePrint from '@/components/ble-print/index.vue'
	import queryBox from './query-box.vue'
	import {
		getDictListAllSimple
	} from '@/api/dict/index.js'
	export default {
		data() {
			return {
				total:0,
				totalPrice:0,
				isQuery:false,
				showQuery:false,
				loading:false,
				removeData:null,
				showRemoveModal:false,
				dataList:[],
				businessList:[],
				assetTypeList:[],
				queryParams:{}
			};
		},
		components:{
			BlePrint,
			queryBox
		},
		onShow() {
			uni.removeStorageSync("edit_barcodeNumber")
			uni.removeStorageSync("edit_copy")
			if(uni.getStorageSync("refresh")){
				uni.removeStorageSync("refresh")
				this.getAssetList()
			}
		},
		mounted() {
			this.getDictList()
			this.getAssetList()
		},
		destroyed() {
			uni.hideLoading()
		},
		methods:{
			search(form,isQuery){
				this.queryParams = form
				this.isQuery = isQuery
				this.getAssetList()
			},
			rightClick(){
				this.showQuery = true
			},
			openRemove(item){
				this.removeData=item;
				this.showRemoveModal=true;
			},
			openEdit(item){
				uni.setStorageSync("edit_barcodeNumber",item.barcodeNumber)
				this.$tab.navigateTo('/pages/asset/asset')
			},
			openCopy(item){
				uni.setStorageSync("edit_barcodeNumber",item.barcodeNumber)
				uni.setStorageSync("edit_copy",true)
				this.$tab.navigateTo('/pages/asset/asset')
			},
			async getDictList() {
				const ret = await getDictListAllSimple()
				const dictData = ret.data || []
				// 业务状态
				const businessList = dictData.filter(v => v.dictType === 'business_status')
				this.businessList = businessList
				// 资产分类
				const assetTypeList = dictData.filter(v => v.dictType === 'asset_classification')
				this.assetTypeList = assetTypeList
			},
			formatDictValue(val,data=[]){
				const oneData = data.find(v=>v.value==val)
				if (oneData){
					return oneData.label
				}
				return val
			},
			async getAssetList () {
				uni.showLoading({
					title:"数据加载中"
				})
				const ret = await getAssetListPage({...this.queryParams,pageSize:5000,pageNo:1})
				uni.hideLoading()
				const list = ret.data.list || []
				this.dataList = list
				this.total = ret.data.total || 0
				let totalOriginalValue = 0
				list.map(v=>{
					totalOriginalValue += Number(v.originalValue||0)
				})
				this.totalPrice = totalOriginalValue
			},
			goDetailPage(item){
				this.$tab.navigateTo('/pages/asset/search?id='+item.barcodeNumber)
			},
			print(item){
				const tenant = uni.getStorageSync("active_tenant")
				const tenantName = tenant.name
				this.$refs.blePrintRef.printQrcode({
					tenantName:tenantName,
					...item,
					assetName:item.title,
					useName:item.useUserName
				})
			},
			async deleteData(){
				this.showRemoveModal = false
				uni.showLoading({
					title:"数据删除中..."
				})
				const ret = await removeAsset({id:this.removeData.id})
				uni.hideLoading()
				uni.showToast({
					title:"数据删除成功!",
					icon:"none"
				})
				this.getAssetList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.data-warp{
	background-color: #fff;
	padding: 10px;
	.data-warp-header{
		display: flex;
		flex-direction: row;
		padding: 4px;

		.left{
			flex: 1;
		}
	}
	.data-warp-content{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		.data-content-item{
			display: flex;
			width: 50%;
			padding: 4px;
		}
	}
	.data-warp-footer{
		padding-top: 10px;
		display: flex;
		flex-direction: row-reverse;
		.btn{
			margin-left: 10px;
			color: #fff;
			border-radius: 4px;
			padding: 6rpx 12rpx;
			width: fit-content;
		}
		.print-btn{
			background-color: #ff842c;
		}
		.remove-btn{
			background-color: red;
		}
		.edit-btn{
			background-color: #3c9cff;
		}
		.copy-btn{
			background-color: #aa00ff;
		}
	}
}
.data-warp+.data-warp{
	margin-top: 10px;
}
.data-warp:last-child{
	margin-bottom: 46px;
}
.nav-footer{
	position: fixed;
	height: 40px;
	width: 100%;
	background-color: #fff;
	z-index: 1000;
	bottom: 0;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	padding: 0 10px;
	border-top: 1px solid #ddd;
	box-shadow:0 -1px 10px rgba(0, 0, 0, 0.16);
}
::v-deep .u-navbar--fixed{
	box-shadow:0 1px 10px rgba(0, 0, 0, 0.16);
}
</style>
